<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { useVbenModal } from '@vben/common-ui'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import type { VxeGridProps, VxeGridListeners } from '#/adapter/vxe-table'
import { Input, message } from 'ant-design-vue'
import { getPurchaseGoodsList } from '#/api/goodsDeliveryTimeLog'

const emit = defineEmits(['selectConfirm'])

interface RowType {
  id: number
  goods_purchase_sn: string
  goods_no: string
  purchase_date: string
  expected_completion_date: string
  SupplyNa: string
  plan_total_num: number
  expired_price: number
  price: number
  remark: string
  go_dead_line: string
  [key: string]: any
}

const data = ref<any>({
  query: {
    quick_search: '',
  },
  selectType: 'checkbox', // checkbox | radio
})

const gridOptions: VxeGridProps<RowType> = {
  // 必须配置项
  border: true,
  checkboxConfig: {
    highlight: true,
    reserve: true,
    showReserveStatus: true,
  },
  rowConfig: {
    useKey: true,
    keyField: 'id',
    isHover: true,
  },
  columnConfig: {
    useKey: true,
  },
  height: '600px',
  columns: [
    { type: 'checkbox', width: 70, fixed: 'left' },
    { field: 'goods_purchase_sn', title: '采购单号', width: 140 },
    { field: 'goods_no', title: '货号', width: 100 },
    { field: 'purchase_date', title: '下单日期', width: 90 },
    { field: 'expected_completion_date', title: '交货日期', width: 90 },
    { field: 'SupplyNa', title: '供货商', width: 100 },
    { field: 'plan_total_num', title: '下单件数', width: 70 },
    { field: 'expired_price', title: '超期预扣', width: 70 },
    { field: 'price', title: '采购价', width: 80 },
    { field: 'remark', title: '备注', width: 300 },
  ],
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const res = await getPurchaseGoodsList({
          ...data.value.query,
          page: page.currentPage,
          limit: 30,
        })

        return {
          items: res.list || [],
          total: res.total || 0,
        }
      },
    },
  },
  toolbarConfig: {},
  pagerConfig: {},
}

const gridEvents: VxeGridListeners<RowType> = {
  cellClick: () => {
    // 可以添加点击事件
  },
}

const [Grid, gridApi] = useVbenVxeGrid({ gridEvents, gridOptions })

const [Modal, modalApi] = useVbenModal({
  class: 'w-3/5',
  onCancel() {
    modalApi.close()
  },
  onConfirm() {
    const checkData = gridApi.grid.getCheckboxRecords()
    if (checkData.length === 0) {
      message.warning('请先选择采购单')
      return false
    }
    emit('selectConfirm', checkData)
    modalApi.close()
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData = modalApi.getData<Record<string, any>>() || {}
      data.value = { ...data.value, ...modalData }
    }
  },
})
</script>

<template>
  <Modal title="选择采购单">
    <Grid>
      <template #toolbar-tools>
        <div>
          <Input
            type="text"
            placeholder="输入采购单号或者货号"
            v-model:value="data.query.quick_search"
            @input="gridApi.reload()"
            :allow-clear="true"
          />
        </div>
      </template>
    </Grid>
  </Modal>
</template>
